<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            padding: 0%;
            margin: 0%;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
            align-content: space-around;
            align-items: center;
        }
    </style>
</head>

<body>
    <!-- 旋转 -->
    <style>
        div.lineFix {
            border-top: 1px solid #333;
            height: 1px;
            position: fixed;
            top: 5rem;
            z-index: 999;
            width: 100%;
        }

        div.contener>div {
            float: left;
        }

        div.contener {
            overflow: hidden;
            zoom: 1;
        }

        /* div.contener::after {
            content: "";
            clear: both;
        } */

        div.rotate {
            width: 19rem;
            height: 10rem;
            background: #ccc;
            position: relative;
        }

        div.rotateX {
            width: 19rem;
            height: 10rem;
            background: #ccc;
            position: relative;
        }

        div.rotateY {
            width: 19rem;
            height: 10rem;
            background: #ccc;
            position: relative;
        }

        div.rotate.xuanzhuan {
            transform: rotate(45deg);
        }

        div.rotateX.xuanzhuan {
            transform: rotateX(45deg);
        }

        div.rotateY.xuanzhuan {
            transform: rotateY(45deg);
        }

        .centerChild {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 5rem;
            height: 3rem;
            background: #eee;
        }
    </style>
    <div class="contener">
        <div class="rotate">
            旋转rotate
            <div class="centerChild">
                旋转rotate
            </div>
        </div>
        <div class="rotateX">
            旋转rotateX
            <div class="centerChild">
                旋转rotateX
            </div>
        </div>
        <div class="rotateY">
            旋转rotateY
            <div class="centerChild">
                旋转rotateY
            </div>
        </div>
        <div style="clear:both;"></div>
    </div>
    <script>
        document.querySelector('.rotate').addEventListener('click', function () {
            this.classList.toggle('xuanzhuan');
        });
        document.querySelector('.rotateX').addEventListener('click', function () {
            this.classList.toggle('xuanzhuan');
        })
        document.querySelector('.rotateY').addEventListener('click', function () {
            this.classList.toggle('xuanzhuan');
        })
    </script>

    <!-- 移动 -->
    <style>
        .translate {
            width: 20rem;
            height: 10rem;
            background: #333;
        }

        .tran {
            transform: translate(10rem, 20rem);
        }
    </style>
    <div class="translate">
        移动translate
    </div>
    <script>
        document.querySelector('.translate').addEventListener('click', function (e) {
            let t = e.srcElement || e.currentTarget;
            t.classList.toggle('tran');
        }, false);
    </script>

    <!-- 裁剪 -->
    <style>
        .scale {
            width: 20rem;
            height: 10rem;
            background: #444;
        }

        .scaled {
            transform: scale(0.5, .3);
        }
    </style>
    <div class="scale">
        裁剪scale
    </div>
    <script>
        document.querySelector('.scale').addEventListener('click', function () {
            this.classList.toggle('scaled');
        })
    </script>

    <!-- 翻转skew -->
    <style>
        div.skew {
            width: 20rem;
            height: 10rem;
            background: #555;
        }

        div.skew.skewd {
            transform: skewY(20deg)
        }
    </style>
    <div class="skew">
        翻转skew
    </div>
    <script>
        document.querySelector('.skew').addEventListener('click', function () {
            this.classList.toggle('skewd');
        })
    </script>

    <!-- transition过度 -->
    <style>
        .transition {
            width: 20rem;
            height: 10rem;
            transition: width 2s;
            background: #555;
        }
        .transition:hover{
            width: 30rem;
        }
    </style>
    <div class="transition">
        transition过度
    </div>
    <script>
        document.querySelector('.transition').addEventListener('click',function(){
            this.style.width = '20rem';
        })
    </script>
</body>




<script>
    let a = function () {
        document.documentElement.style.fontSize = (document.documentElement.clientWidth / 1897) * 16 + 'px';
    }
    let v = resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    window.addEventListener('resize', a, false);
    document.addEventListener('DOMContentLoaded', a, false);
</script>

</html>